<template>
   <header>
       <div class="left">
            <el-input v-model="shopList.goodsName" style="width: 180px" placeholder="请输入商品名称" class="account"/>
            <el-input v-model="shopList.shopName" style="width: 180px" placeholder="请输入商家名称" class="tel"/>
            <el-input v-model="shopList.brandName" style="width: 180px" placeholder="请输入品牌名称" class="tel"/>
            <el-icon @click="searchShops"><Search /></el-icon>
        </div>
       <div>
        <el-button type="primary">+添加</el-button>
       </div>
    </header>
    <el-row id="content">
        <el-table :data="goods" style="width: 100%;" >
            <el-table-column label="商品名称" prop="goodsName"/>
            <el-table-column label="价格" prop="price" />
            <el-table-column label="现有价格"   prop="todayPrice"/>
            <el-table-column label="折扣" prop="discount"/>
            <el-table-column label="所属商家"   prop="shopName"/>
            <el-table-column prop="businessName">
                <template #header>
                   <select @change = "ShopBusiness" v-model="ShopBusinessFlag">
                        <option value="商品类别">商品类别</option>
                        <template  v-for="item in BusinessFlag" :key="item.businessId">
                            <option :value="item.businessId">{{ item.businessName }}</option>
                        </template>
                   </select>
                </template>
            </el-table-column>
            <el-table-column label="是否下架" :formatter="isDelflag">
                <template #header>
                   <select v-model="delflag" @change = "outDel">
                        <option value="2">是否下架</option>
                        <option value="1">否</option>
                        <option value="0">是</option>
                   </select>
                </template>
            </el-table-column>
            <el-table-column label="库存" prop='number'/>
            <el-table-column label="浏览量" prop="pageView" />
            <el-table-column label="热门推荐" prop="goodsHot">
                <template #default="scoped">
                    <el-switch v-model="flag" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
                </template>
            </el-table-column>
            <el-table-column label="商品品牌" prop="brandName" />
        </el-table>
    </el-row>
    <el-row id="footer">
        <!-- 分页 -->
      <el-pagination 
            background 
            layout="prev,pager,next" 
            :page-count=pageCount
            :page-size=pageSize
            @current-change="pageChange"
        ></el-pagination>
    </el-row>
</template>
<script setup>
    import { computed, onMounted, reactive,ref } from 'vue';
    import {GoodsList,BusinessList,SearchGoods,SearchBrand,OutDelflag} from "@/api";
    import { ElMessage, formatter } from 'element-plus';
    
   
    let shopList = reactive({
        goodsName:"",
        shopName:"",
        brandName:""
    })
    let goods = ref(null);//table绑定的商品列表
    let BusinessFlag = ref(null);//商品分类
    const pageIndex = ref(1);
    const pageSize = ref(7);
    const pageCount = ref(0);
    let pageFlag=ref(0);
    // 开关
    let flagOne = ref("0");
    let fristName = ref(true);
    let lastName = ref(false);
    let flag = computed({
       get(row){
        console.log(row);
        
            return flagOne.value == "0" ? fristName.value :lastName.value;
       },
       set(value){
        console.log(value);
        console.log(flagOne.value);
        
            if(flagOne.value){
                fristName.value = value;
            }else{
                lastName.value = value;  
            }
       }
    })
    console.log(flag.value);
    
  
    // 是否下架 delflag
    function isDelflag(row){
        // console.log("本行数据",row.delflag);
        if(row.delflag == "0"){
            return "否"
        }else{
            return "是"
        }
        
    }
    // 
   
    // 商品列表的渲染
    async function goodsList(){
        var data = {
            pageIndex:pageIndex.value,
            pageSize:pageSize.value,
        }
        let res = await GoodsList(data);
        console.log("商品列表",res);
        goods.value = res.oeders;
        pageCount.value = res.pageCount;
    }

    // 主营业务
    async function business(){
        let res = await BusinessList();
        // console.log("主营业务",res);
        BusinessFlag.value = res;
    }

    // 搜索商品
    async function searchShops(){
        var data ={
            pageIndex:pageIndex.value,
            pageSize:pageSize.value,
            goodsName:shopList.goodsName,
            shopName:shopList.shopName,
            brandName:shopList.brandName
        }
        let res = await SearchGoods(data);
        console.log("商品搜索",res);
        goods.value = res.oeders;
        pageCount.value = res.pageCount;
        // 提示用户数据不存在
        if(pageCount.value == "0"){
            ElMessage.warning("数据不存在");
            pageCount.value = 1
        }
        return pageFlag.value
    }
    // 搜索商品类别
    let ShopBusinessFlag = ref("商品类别");
    async function ShopBusiness(){
        delflag.value = "2";
        if(ShopBusinessFlag.value == "商品类别"){
            goodsList();
        }else{
            let res =await SearchBrand({
                pageIndex:pageIndex.value,
                pageSize:pageSize.value,
                businessId:ShopBusinessFlag.value.toString()
            })
            console.log("搜索商品类别",res);
            goods.value = res.oeders;
            pageCount.value = res.pageCount;
        }
        return pageFlag.value = 1;
        
    }

    // 是否下架
    const delflag = ref(2);//是否下架
    async function outDel(){
        // 商品类别
        ShopBusinessFlag.value = "商品类别"
        if(delflag.value == "2"){
            goodsList();
        }
        else{
            let res = await OutDelflag({
                pageIndex:pageIndex.value,
                pageSize:pageSize.value,
                whetherUpOrDrown:delflag.value
            })
            console.log("是否下架",res);
            goods.value = res.oeders;
            pageCount.value = res.pageCount;
            // 提示用户数据不存在
            if(pageCount.value == "0"){
                ElMessage.warning("数据不存在");
                pageCount.value = 1
            }
        }
        return pageFlag.value = 2;
    }
    // 分页
    function pageChange(index){
        pageIndex.value = index;
        if(pageFlag.value == 1){
            ShopBusiness();
        }else if(pageFlag.value == 2){
            outDel();
        }else{
            searchShops();
        }
    }
    onMounted(()=>{
        goodsList();
        business();
    })
</script>
<style lang="less" scoped>
    header{
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            :deep(.el-input__wrapper.is-focus){
                box-shadow: 0px 0px 0px 1px #ccc ;
            }
            .el-icon{
                width:10%;
                height: 15%;
                background-color: aquamarine;
                color: #8a8686;
                font-weight: 700;
                border-radius: 10px;
                svg {
                    height: 2em;
                    width: 1em;
                }
            }
        }
    }
    :deep(.el-table .cell) {
        text-align: center;
    }
    #content{
        margin-top:30px;
    }
    #footer{
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }
</style>